RxJS কি?

Web Development - অ্যাঙ্গুলার (Angular) - RxJS এবং Observables |
3
3

RxJS (Reactive Extensions for JavaScript) হল একটি লাইব্রেরি যা প্রতিক্রিয়া ভিত্তিক প্রোগ্রামিং (Reactive Programming) ধারণাকে বাস্তবায়িত করে। এটি অবজার্ভেবল (Observable) স্ট্রিম এবং অপারেটরস (Operators) এর মাধ্যমে অ্যাসিনক্রোনাস ডেটা স্ট্রিম এবং ইভেন্টগুলির সাথে কাজ করতে ব্যবহৃত হয়। RxJS Angular অ্যাপ্লিকেশনগুলিতে ডেটা স্ট্রিম, ইভেন্ট এবং অ্যাসিনক্রোনাস অপারেশনগুলি পরিচালনা করার জন্য একটি অত্যন্ত শক্তিশালী টুল।

Angular-এ RxJS ব্যাপকভাবে ব্যবহৃত হয়, বিশেষ করে HTTP রিকোয়েস্ট, ইভেন্ট হ্যান্ডলিং, টেমপ্লেট ডেটা বাইন্ডিং এবং ইউজার ইনপুটের ক্ষেত্রে।


RxJS এর মূল ধারণা

RxJS মূলত Observables এর সাথে কাজ করে, যা ডেটা স্ট্রিম বা ইভেন্টের ধারাবাহিকতা কে প্রতিক্রিয়া ভিত্তিক ভাবে পরিচালনা করে। এতে ডেটা প্রবাহকে স্নিগ্ধ এবং সহজভাবে প্রসেস করা যায়, যেমন একটি ইউজার ইনপুট বা সার্ভার থেকে আসা ডেটা স্ট্রিম।

RxJS এর মধ্যে কিছু গুরুত্বপূর্ণ উপাদান রয়েছে:

  • Observable: একটি টাইপ যা ডেটা স্ট্রিম বা ইভেন্টের ধারাবাহিকতা প্রতিনিধিত্ব করে।
  • Observer: অবজার্ভেবলকে সাবস্ক্রাইব করে এবং ইভেন্টগুলি গ্রহণ করে।
  • Operators: অবজার্ভেবলগুলির উপর বিভিন্ন ধরনের কার্যকলাপ প্রয়োগ করতে ব্যবহৃত ফাংশন।
  • Subscription: অবজার্ভেবল থেকে ডেটা সাবস্ক্রাইব করার জন্য ব্যবহার হয়।

RxJS এর মূল উপাদান

1. Observable

Observable একটি ডেটা স্ট্রিম বা ইভেন্টের সিরিজ যা অ্যাসিনক্রোনাস অপারেশন বা ইভেন্টের ফলাফল হতে পারে। এটি ভবিষ্যতের মান প্রদান করতে সক্ষম এবং এটি একাধিক মান (ডেটা) প্রাপ্তি করতে পারে। অবজার্ভেবল সাধারণত HTTP রিকোয়েস্ট, ইউজার ইনপুট, টাইমার, বা ইভেন্টগুলির জন্য ব্যবহৃত হয়।

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next('Hello');
  subscriber.next('World');
  subscriber.complete();
});

observable.subscribe({
  next(value) { console.log(value); },
  complete() { console.log('Completed!'); }
});

এখানে, Observable একটি স্ট্রিম তৈরি করে, যা next() মেথড দ্বারা ভ্যালু পাঠায় এবং complete() মেথডের মাধ্যমে সম্পূর্ণ হয়।

2. Observer

Observer একটি অবজার্ভেবল থেকে আসা ডেটা বা ইভেন্টকে গ্রহণ করে। এটি তিনটি মেথডে ডেটা গ্রহণ করে: next(), error(), এবং complete()

const observer = {
  next: value => console.log('Received:', value),
  error: err => console.log('Error:', err),
  complete: () => console.log('Observable complete')
};

এখানে, Observer অবজার্ভেবল থেকে ডেটা গ্রহণ করবে এবং next(), error(), অথবা complete() এর মাধ্যমে ফলাফল দেখাবে।

3. Operators

RxJS অপারেটরগুলি অবজার্ভেবলগুলির উপর বিভিন্ন রকম অপারেশন প্রয়োগ করতে ব্যবহৃত হয়। এগুলি অনেক ধরনের হতে পারে, যেমন ডেটা ফিল্টার করা, ম্যাপ করা, মার্জ করা ইত্যাদি। কিছু সাধারণ অপারেটরের মধ্যে রয়েছে:

  • map: একটি অবজার্ভেবল থেকে ডেটাকে পরিবর্তন করে।
  • filter: অবজার্ভেবল থেকে নির্দিষ্ট শর্ত অনুযায়ী ডেটা ফিল্টার করে।
  • merge: একাধিক অবজার্ভেবলকে একত্রিত করে।
  • concat: একাধিক অবজার্ভেবলকে সিকোয়েন্স অনুযায়ী চালায়।
import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const numbers = of(1, 2, 3, 4, 5);

numbers.pipe(
  map(value => value * 2)
).subscribe(value => console.log(value));

এখানে, map() অপারেটর ব্যবহার করে প্রত্যেকটি মানকে ২ দিয়ে গুণ করা হয়েছে।

4. Subscription

Subscription একটি অবজার্ভেবল সাবস্ক্রাইব করার পদ্ধতি। এটি অবজার্ভেবল থেকে ডেটা গ্রহণ করতে ব্যবহৃত হয় এবং unsubscribe() মেথডের মাধ্যমে অবজার্ভেবল সাবস্ক্রিপশন বাতিল করা যায়।

const subscription = observable.subscribe({
  next(value) { console.log(value); },
  complete() { console.log('Complete!'); }
});

// সাবস্ক্রিপশন বন্ধ করা
subscription.unsubscribe();

এখানে, সাবস্ক্রাইব করার পরে unsubscribe() মেথড ব্যবহার করে সাবস্ক্রিপশন বন্ধ করা হয়েছে।


RxJS এবং Angular

Angular অ্যাপ্লিকেশনগুলিতে RxJS ব্যাপকভাবে ব্যবহৃত হয়, বিশেষত HTTP রিকোয়েস্ট এবং ফর্ম ইভেন্টগুলি নিয়ন্ত্রণ করার জন্য। Angular এর HTTP ক্লায়েন্টও RxJS ব্যবহার করে, যেটি HTTP রিকোয়েস্টের ফলাফলকে Observable হিসেবে প্রদান করে। এছাড়া, Angular এর ফর্ম সিস্টেম এবং রাউটিং সিস্টেমেও RxJS অন্তর্ভুক্ত রয়েছে।

উদাহরণ: HTTP রিকোয়েস্টে RxJS ব্যবহার

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get('https://api.example.com/data');
  }
}

এখানে, getData() মেথডটি HTTP রিকোয়েস্টের ফলাফলকে Observable হিসেবে প্রদান করছে, এবং এই Observable কে Angular টেমপ্লেটে সাবস্ক্রাইব করা যায়।


RxJS এর সুবিধা

  • অ্যাসিনক্রোনাস অপারেশন সহজ করা: RxJS অ্যাসিনক্রোনাস ডেটা স্ট্রিম এবং ইভেন্টগুলির পরিচালনা সহজ করে।
  • ফাংশনাল প্রোগ্রামিং: RxJS এর অপারেটরগুলির মাধ্যমে আপনি ডেটা স্ট্রিমের উপর ফাংশনাল অপারেশন করতে পারেন।
  • পারফরম্যান্স: Reactive প্রোগ্রামিং প্যাটার্ন অ্যাসিনক্রোনাস স্ট্রিমের সাথে আরও কার্যকরীভাবে কাজ করতে সাহায্য করে।

RxJS একটি শক্তিশালী টুল যা Angular অ্যাপ্লিকেশনগুলিকে আরও স্কেলেবল এবং পারফর্ম্যান্ট করে তোলে।

Content added By

Read more

Promotion